<template>
  <div class="twoPage"> 
    <draggable  :list="list" :disabled="!enabled" class="list-group" ghost-class="ghost"
        :move="checkMove" @start="dragging = true" @end="dragging = false">
        <div class="list-group-item" v-for="element in list" :key="element.name">
          {{ element.name }}
        </div>
      </draggable>
  </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
  data() {
    return {
      enabled: true,
      list: [
        { name: "1 - John", id: 0 },
        { name: "2 - Joao", id: 1 },
        { name: "3 - Jean", id: 2 }
      ],
      dragging: false
    };
  },
  components:{
    draggable
  },
  mounted() {
  },
  methods: {
    checkMove: function(e) {
      window.console.log("Future index: " + e.draggedContext.futureIndex);
    }
  }
};
</script>
<style lang="less" scoped>
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.list-group{
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  width: 300px;
  .list-group-item{
    cursor: move;
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
  }
}
</style>

